<template>
  <div class="">
    <!-- 顶部部分 -->
    <van-sticky>
      <div id="top">
        <div @click="tozhongxin">
          <van-icon
            name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
            size="30"
          />
        </div>
        <div>
          <span>以岭中药</span>
        </div>
        <div @click="souSuo">
          <van-icon name="search" size="20" />
        </div>
      </div>
    </van-sticky>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>

    <!-- 精选药材 -->
    <van-cell-group>
      <van-cell>
        <div id="jingxuan">
          <span>精选药材</span>&emsp;<span>匠心精选,尖货满满</span><span>全部></span>
        </div>
      </van-cell>
    </van-cell-group>

    <!-- 商品展示 -->
    <div>
      <van-cell>
        <div id="xiang" v-for="item in list" :key="item.id" @click="xinxi">
          <div>
            <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="" />
          </div>
          <ul>
            <li>{{ item.name }}</li>
            <li>{{ item.introduce }}</li>
            <li>￥{{ item.price }}</li>
          </ul>
        </div>
      </van-cell>
    </div>

    <!-- 精选药材 -->
    <van-cell-group>
      <van-cell>
        <div id="jingxuan">
          <span>平台热销</span>&emsp;<span>匠心精选,尖货满满</span><span>全部></span>
        </div>
      </van-cell>
    </van-cell-group>

    <!-- 商品展示 -->
    <div>
      <van-cell>
        <div id="xiang" v-for="item in list" :key="item.id" @click="xinxi">
          <div>
            <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="" />
          </div>
          <ul>
            <li>{{ item.name }}</li>
            <li>{{ item.introduce }}</li>
            <li>￥{{ item.price }}</li>
          </ul>
        </div>
      </van-cell>
    </div>



     <!-- 精选药材 -->
     <van-cell-group>
      <van-cell>
        <div id="jingxuan">
          <span>更多药材</span>&emsp;  <span></span> <span>全部></span>
        </div>
      </van-cell>
    </van-cell-group>

    <!-- 商品展示 -->
    <div>
      <van-cell>
        <div id="xiang" v-for="item in list" :key="item.id" @click="xinxi">
          <div>
            <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="" />
          </div>
          <ul>
            <li>{{ item.name }}</li>
            <li>{{ item.introduce }}</li>
            <li>￥{{ item.price }}</li>
          </ul>
        </div>
      </van-cell>
    </div>
    <div id="jiazai">

        <van-loading size="24px" vertical>正在加载更多</van-loading>
    </div>

  </div>
</template>

<script>
export default {
  name: "",
  mixins: [],
  components: {},
  props: {},
  data() {
    return {
      list: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.list = this.$store.state.list;
  },
  methods: {
    souSuo(){
      this.$router.push('/souSuo')
    },
    tozhongxin(){ 
      this.$router.push('/homee')
    },
    xinxi(){
      this.$router.push('/ProductInfo')
    }
  },
};
</script>

<style scoped lang="less">
#top {
  widows: 100vw;
  background-color: #f9f9f9;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
}
#top span {
  font-size: 18px;
  font-weight: 900;
  color: #999999;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 180px;
  text-align: center;
  background-color: #39a9ed;
}

#jingxuan span:nth-child(1) {
  font-size: 18px;
  color: red;
}
#jingxuan span:nth-child(3) {
  float: right;
}

#xiang {
  display: flex;
  justify-content: left;
  align-items: center;
}
#xiang img {
  widows: 100px;
  height: 100px;
}

#jiazai{
   height: 130px;
}
</style>
